import cx from 'classnames';
import React from 'react';
import { prefix } from '../config';
import * as utils from '../utils';
import './style/DefaultStatus.less';
import {
  SvgNoContent,
  SvgNoData,
  SvgNoFound,
  SvgNoMessage,
  SvgNoPower,
} from './Svg';

export type State =
  | 'noMessage'
  | 'noContent'
  | 'noPower'
  | 'noData'
  | 'noFound';
export type Size = 'large' | 'middle' | 'small';

export interface Props {
  /** 状态类型 */
  type?: State;
  /** 自定义提示语 */
  tip?: string;
  /** 宽度尺寸类型 */
  size?: Size;
  /** 宽度自定义，状态图高度自适应 */
  width?: number;
}
export type defaultStatusRef = {
  getSize: (element?: Element) => { width: number; height: number };
};
const prefixCls = utils.getPrefixCls(prefix.stong, 'default-status');
const config = {
  noContent: {
    componnet: SvgNoContent,
    tip: '暂无搜索内容~',
  },
  noData: {
    componnet: SvgNoData,
    tip: '暂无相关内容~',
  },
  noFound: {
    componnet: SvgNoFound,
    tip: '暂无相关内容~',
  },
  noMessage: {
    componnet: SvgNoMessage,
    tip: '暂无相关信息~',
  },
  noPower: {
    componnet: SvgNoPower,
    tip: '暂无权限访问~',
  },
};
function DefaultStatus(
  props: Props,
  ref: React.ForwardedRef<defaultStatusRef>,
) {
  const boxRef = React.useRef(null);
  const { type = 'noData', size = 'middle', tip, width } = props;
  const Component = config[type].componnet;
  const style: React.CSSProperties = {};
  if (width) style.width = width;

  const getSize = (element?: Element) => {
    const size = { width: 0, height: 0 };
    if (boxRef.current) {
      size.width = utils.getElementSize(element || boxRef.current, 'width');
      size.height = utils.getElementSize(element || boxRef.current, 'height');
    }
    return size;
  };
  React.useImperativeHandle(ref, () => ({ getSize }));

  return (
    <div className={prefixCls} ref={boxRef}>
      <div className={cx(`${prefixCls}-img`, size)} style={style}>
        <Component />
      </div>
      <div className={`${prefixCls}-tip`}>{tip || config[type].tip}</div>
    </div>
  );
}
export default React.forwardRef(DefaultStatus) as (
  props: Props & { ref?: React.ForwardedRef<defaultStatusRef> },
) => ReturnType<typeof DefaultStatus>;
